<template>
  <el-container>
    <el-main>
      <div class="container">
        <div class="reportDetail">
          <el-row :gutter="20">
            <el-col :span="8" class="showCenter">
              <div id="literatureCategory" class="echartsBox"></div>
            </el-col>
            <el-col :span="8" class="showCenter">
              <div id="likeCategory" class="echartsBox"></div>
            </el-col>
            <el-col :span="8" class="showCenter">
              <div id="score" class="echartsBox"></div>
            </el-col>
          </el-row>
        </div>

<!--        <div class="designReport">-->
<!--          <el-row :gutter="20">-->
<!--            <el-col :span="24">-->
<!--              <el-button type="primary" plain @click="goDesignReport">设计报表</el-button>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row :gutter="20">-->
<!--            <el-col :span="24">-->
<!--              <el-button type="primary" plain @click="designLiteratureCategory">设计文献类别信息</el-button>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row :gutter="20">-->
<!--            <el-col :span="24">-->
<!--              <el-button type="primary" plain @click="designLikeCategory">设计文献喜好类型</el-button>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--          <el-row :gutter="20">-->
<!--            <el-col :span="24">-->
<!--              <el-button type="primary" plain @click="designScore">设计文献评分</el-button>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </div>-->
      </div>
    </el-main>
  </el-container>
</template>

<script>
import {getRequest} from '../../tools/api'

require('echarts/theme/macarons')

export default {
  name: 'ReportCenter',
  data () {
    return {
      literatureType: ['科技图书', '科技期刊', '专利文献', '会议文献', '科技报告', '政府出版物', '学位论文', '标准文献', '产品资料', '其他文献'],
      literatureCategory: {
        names: [],
        grades: [],
        readCounts: []
      },
      likeCategory: [],
      score: {
        names: [],
        grades: []
      }
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      Promise.all([this.queryLiteratureCategory(), this.queryLikeCategory(), this.queryScore()]).then(resp => {
        resp[0] === 200 && this.drawLiteratureCategory()
        resp[1] === 200 && this.drawLikeCategory()
        resp[2] === 200 && this.drawScore()
      })
    },
    queryLiteratureCategory () {
      return new Promise((resolve, reject) => {
        getRequest('/echarts/queryLiteratureCategory').then(res => {
          if (res.code === 200) {
            res.data.forEach(item => {
              this.literatureCategory.names.push(item.name.length > 5 ? item.name.slice(0, 5) + '...' : item.name)
              this.literatureCategory.grades.push(item.grade ? item.grade : 0)
              this.literatureCategory.readCounts.push(item.readCount)
            })

            resolve(res.code)
          } else {
            reject(res.code)
          }
        })
      })
    },
    queryLikeCategory () {
      return new Promise((resolve, reject) => {
        getRequest('/echarts/queryLikeCategory').then(res => {
          if (res.code === 200) {
            res.data.forEach(item => {
              let curObj = {
                value: item.count,
                name: this.literatureType[item.type]
              }
              this.likeCategory.push(curObj)
            })

            resolve(res.code)
          } else {
            reject(res.code)
          }
        })
      })
    },
    queryScore () {
      return new Promise((resolve, reject) => {
        getRequest('/echarts/queryScore').then(res => {
          if (res.code === 200) {
            res.data.forEach(item => {
              this.score.names.push(item.name.length > 5 ? item.name.slice(0, 5) + '...' : item.name)
              this.score.grades.push(item.grade)
            })

            resolve(res.code)
          } else {
            reject(res.code)
          }
        })
      })
    },
    drawLiteratureCategory () {
      let _this = this
      var literatureCategoryChart = this.$echarts.init(document.querySelector('#literatureCategory'), 'macarons')
      var option

      option = {
        title: {
          text: '文献信息统计',
          left: 'left',
          top: 20
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['平均评级', '阅读次数'],
          left: 'right',
          top: 20
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.literatureCategory.names,
          axisLabel: {
            // 设置字体的倾斜角度
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '平均评级',
            type: 'line',
            stack: 'Total',
            data: this.literatureCategory.grades
          },
          {
            name: '阅读次数',
            type: 'line',
            stack: 'Total',
            data: this.literatureCategory.readCounts
          }
        ]
      }

      option && literatureCategoryChart.setOption(option)

      literatureCategoryChart.on('click', function (params) {
        _this.showLiteratureCategory()
      })
    },
    drawLikeCategory () {
      let _this = this
      // 基于准备好的dom，初始化echarts实例
      let likeCategory = this.$echarts.init(document.querySelector('#likeCategory'), 'macarons')

      // 绘制图表
      likeCategory.setOption({
        title: {
          text: '文献喜好类型',
          left: 'center',
          top: 20
        },

        tooltip: {
          trigger: 'item',
          backgroundColor: '#ccc'
        },

        series: [{
          name: '文献阅读次数',
          type: 'pie',
          radius: '55%',
          center: ['50%', '50%'],
          data: this.likeCategory.sort(function (a, b) {
            return a.value - b.value
          }),
          roseType: 'radius',

          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200
          }
        }]
      })

      likeCategory.on('click', function (params) {
        _this.showLikeCategory()
      })
    },
    drawScore () {
      let _this = this
      let chartScore = this.$echarts.init(document.querySelector('#score'), 'macarons')

      chartScore.setOption({
        title: {
          text: '文献评分',
          left: 'center',
          top: 20
        },
        xAxis: {
          type: 'category',
          data: this.score.names,
          axisLabel: {
            // 设置字体的倾斜角度
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.score.grades,
            type: 'bar',
            barWidth: 30
          }
        ]
      })

      chartScore.on('click', function (params) {
        _this.showScore()
      })
    },
    goDesignReport () {
      this.$router.push('/DesignReport')
    },
    showLiteratureCategory () {
      this.$router.push({
        name: 'DesignReport',
        params: {
          src: 'http://localhost:8081/jmreport/view/672698136251539456?token=null',
          reportName: '文献类别'
        }
      })
    },
    showLikeCategory () {
      this.$router.push({
        name: 'DesignReport',
        params: {
          src: 'http://localhost:8081/jmreport/view/672680781430968320?token=null',
          reportName: '文献喜好类型'
        }
      })
    },
    showScore () {
      this.$router.push({
        name: 'DesignReport',
        params: {
          src: 'http://localhost:8081/jmreport/view/674557114948173824?token=null',
          reportName: '文献评分'
        }
      })
    },
    designLiteratureCategory () {
      this.$router.push({
        name: 'DesignReport',
        params: {
          src: 'http://localhost:8081/jmreport/index/672698136251539456',
          reportName: '设计文献类别信息'
        }
      })
    },
    designLikeCategory () {
      this.$router.push({
        name: 'DesignReport',
        params: {
          src: 'http://localhost:8081/jmreport/index/672680781430968320?token=null',
          reportName: '设计文献喜好类型'
        }
      })
    },
    designScore () {
      this.$router.push({
        name: 'DesignReport',
        params: {
          src: 'http://localhost:8081/jmreport/index/674557114948173824?token=null',
          reportName: '设计文献喜好类型'
        }
      })
    }
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 10px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.reportDetail {
  flex: 1;
}

.designReport {
  width: 200px;
}

.showCenter {
  text-align: center;
}

.echartsBox {
  width: 100%;
  height: 400px;
}
</style>
